import React, { useState } from 'react';
import { Input } from 'antd';
import Button from '@material-ui/core/Button';
import { get_sms_code } from '../utils/api.tsx';
import { tellcode } from '../utils/types/home.ts';

export default function Tell_yzm(props) {
  const [tell, setTell] = useState<number>();
  const [yzmcode, setyamcode] = useState<string>('');
  const gettellcode = async (tell: tellcode) => {
    const data = await get_sms_code(tell);
    console.log(data);
  };
  const getchildren = (e) => {
    props.getyzmcode(e);
  };
  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}
    >
      <Input
        placeholder="手机验证码"
        style={{ width: '70%' }}
        size="large"
        value={yzmcode}
        onChange={(e) => {
          setyamcode(e.target.value);
          getchildren(e.target.value);
        }}
      />

      <Button
        color="primary"
        style={{ fontSize: '0.1rem', width: '30%' }}
        onClick={() => {
          if (!props.tell) {
            alert('请输入手机号');
          }
          gettellcode(props.tell);
        }}
      >
        {props.name}
      </Button>
    </div>
  );
}
